<template>
	<view id="page-app">
		<kui-page :custom-header="false" :paddingY="0">
			<view class="body kui-p-3">
				<kui-space :gap="[30,0]" direction="column">
					<kui-cell-group title="基本用法">
						<view class="kui-h-full">
							<view class="kui-bg-white kui-h-8 kui-p-3 kui-rounded-md">
								<kui-sticky>
									<kui-button type="primary">基本用法</kui-button>
								</kui-sticky>
							</view>
						</view>
					</kui-cell-group>
					<kui-cell-group title="吸顶距离">
						<view class="kui-h-full">
							<view class="kui-bg-white kui-h-8 kui-p-3 kui-rounded-md">
								<kui-sticky :top="100">
									<kui-button type="danger">吸顶距离100px</kui-button>
								</kui-sticky>
							</view>
						</view>
					</kui-cell-group>
					<kui-cell-group title="指定容器">
						<view class="kui-h-full">
							<view class="kui-bg-white kui-h-96 kui-p-3 kui-rounded-md" ref="container" id="container">
								<kui-sticky :top="100" :container="container" :proxy="proxy" container-id="container" ref="sticky">
									<kui-button type="warning">指定容器</kui-button>
								</kui-sticky>
							</view>
						</view>
					</kui-cell-group>
					<!-- <kui-cell-group title="吸底距离">
						<view class="kui-h-full">
							<view class="kui-bg-white kui-h-8 kui-p-3 kui-rounded-md">
								<kui-sticky position="bottom" :bottom="100">
									<kui-button type="primary">吸底距离100px</kui-button>
								</kui-sticky>
							</view>
						</view>
					</kui-cell-group> -->
				</kui-space>
			</view>
		</kui-page>
	</view>
</template>

<script lang="ts">
	import {
		onPageScroll,
		onReady,
		onUnload
	} from '@dcloudio/uni-app';
	import { ref, getCurrentInstance, SetupContext } from 'vue';
	import { useKviewuiRect } from '@/common/utils/element';
	
	export default {
		setup(context: SetupContext) {
			const container = ref(null);
			const {
				proxy
			}: any = getCurrentInstance();
			
			const observerStart = uni.createIntersectionObserver(proxy);
			const observerEnd = uni.createIntersectionObserver(proxy);
			
			onReady(() => {
				// 获取节点信息
				useKviewuiRect(container, 'container').then(res => {
					observerStart.relativeToViewport({top: -res.height}).observe(`#container`, (res) => {
						proxy.$refs['sticky'].observerStart(res);
					})
					observerEnd.relativeToViewport({top: -120}).observe('#container', (res) => {
						proxy.$refs['sticky'].observerEnd(res);
					});
				})
				// observer.disconnect();
			})
			
			onUnload(() => {
				// 停止节点监听
				observerStart.disconnect();
				observerEnd.disconnect();
			})
			
			return {
				container,
				proxy
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F8F8F8;
	}
	.body {
		min-height: 200vh;
	}
</style>
